<template>
	<div class="w750">
		

		<!-- 我的收藏 -->
		<div class="collection" :class="themes.theme">
			<div class="total-collection">
				<div class="total-num">您共收藏了<span class="num">{{paging.total}}</span>个商品</div>
				<!-- <a href="javascript:void(0);" class="edit-btn" status="0" onclick="edit(this);">编辑</a> -->
			</div>
			<div class="collection-list">
				<van-list
					v-model="paging.loading"
					:finished="paging.finished"
					:finished-text="!paging.emptylist?'没有更多了':''"
					@load="onLoad"
					:immediate-check="false"
					:error.sync="paging.error"
  					error-text="请求失败，点击重新加载"
					v-if="!paging.emptylist"
				>
					<div class="item" v-for="(item, index) in list" @click="goGoodsDetail(item.prodId)" :key="index">
						<span class="pro-mes">
							<div class="pro-img">
                                <legend-image :pic="item.pic" :options="{w:'90',h:'90'}" :isJD="item.prodSource=='JD'"/>
								<img src="@/assets/images/haitao-small.png"  class="haitao" v-if="item.goodsType == 'overseas'" />
							</div>
							<div class="pro-name">
								<div class="name">{{ item.prodName }}</div>
								<!-- <div class="sku">{{ item.favoriteCount }}人收藏</div> -->
								<div class="pro-price">
									<span class="price">
										￥<em class="now">{{ Money(item.price)[0] }}</em>.{{ Money(item.price)[1] }}
									</span>
								</div>
							</div>
							<div class="see-similar" @click.stop="cancelProdCollect(item.id)">取消收藏</div>
							
						</span>
					</div>
				</van-list>
			</div>

			<Noempty :pic="require('@/assets/images/collect-empty.png')" title="您还没有收藏过商品" v-if="paging.emptylist && !paging.error" />
			<!--<div class="collection-foot">
				<div class="check-all"><span class="choose"></span>全选</div>
				<span class="foot-btn">取消收藏</span></div>-->
		</div>
		<!-- /收藏列表 -->
	</div>
</template>

<script>
import { List } from 'vant';
import HeadSelect from 'components/headBox/headSelect';
import Noempty from 'components/Noempty/Noempty';
import legendImage from 'components/legendImage/legendImage';
import cash from 'utils/tool';
import {mapState} from 'vuex';
import PageUtil from 'utils/PageUtil';
import { getGoodsCollection, deleteProdCollect } from 'api/collection';

const pageUtil = new PageUtil(getGoodsCollection);

export default {
	components: {
		Noempty,
		HeadSelect,
        legendImage
	},
	data() {
		return {
			Money: cash, //价格转换
			on: false ,//判断头部下拉菜单显示和消失
			paging: {
				tab:false,
				total: 0,
				loading: false,
				finished: false,
				error: false, // 是否错误
				emptylist: false,// 是否显示列表为空时的样式
			},
			list: []
		};
	},
	mounted() {
		pageUtil.loadListByPage(this);
	},
	methods: {
		//下拉加载
		onLoad() {
			pageUtil.loadListByPageMore();
		},

		goback() {
			//返回
			this.$router.back();
			this.$router.isBack = true;
		},

		// 去商品详情
		goGoodsDetail(prodId) {
			this.$router.push({
				path: `/goodsDetail`,
				query: {
					goodsInfoId: prodId
				}
			});
		},

		//取消收藏商品
		 cancelProdCollect(id) {
			this.$dialog.confirm({title: '取消收藏',message: '是否确认取消收藏'}).then(async  () => {

				let fvouriteIds = [id];
				let params = {"fvouriteIds": id};

				try {
					let res = await deleteProdCollect(params)
					if (res.status != 1) {
						this.$toast({duration: 1000,message:res.msg})
						return
					}
					pageUtil.loadListByPageRefresh();
				} catch (error) {
					this.$toast({duration: 1000,message:"获取数据失败"})
				}
				
			});
		}
	},
	computed: {
		...mapState(['themes']),
	},
};
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/collect.css" scoped></style>
<style lang="stylus" scoped>
.pro-img {
    position: relative;
    .haitao {
        position: absolute;
        top: 0;
        left: 0px;
        width: 30px !important;
        height: 30px !important;
    }
}
</style>
